{% extends "base.html" %}
{% load static %}
{% block title %}创建{% endblock %}
{% block css %}
<link rel="stylesheet" href="{% static 'css/update_watch.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
{% endblock %}
{% block content %}

<div class="update-form">
    <div class="status">{{ status | default_if_none:"" }}</div>
    <div class="form">
        <form class="form" method="post" action="{% url 'add_watch' %}"> 
            {% csrf_token %}
            <div class="update-info">
                <span class="update-key">类型</span>
                <input type="radio" id="option-anime" name="type" value="动画">  
                <label for="动画" class="option">动画</label> 
                <input type="radio" id="option-movie" name="type" value="电影">  
                <label for="电影" class="option">电影</label>
                <input type="radio" id="option-teleplay" name="type" value="电视剧">  
                <label for="电视剧" class="option">电视剧</label>
                <input type="radio" id="option-novel" name="type" value="小说">  
                <label for="小说" class="option">小说</label>
            </div>
            <div class="update-info">
                <span class="update-key">名称</span>
                <input class="update-value" type="text" id="name" name="name" placeholder="请输入作品名称" list="seasonlist"> 
                <datalist id="seasonlist">
                    {% for result in results %}
                    <option>{{ result.name }}</option>
                    {% endfor %}
                </datalist>
            </div>
            <div class="update-info">
                <span class="update-key">次数</span>
                <input class="update-value" type="number" name="times" value=1> 
            </div>
            <div class="update-info">
                <span class="update-key">开始日期</span>
                <input class="update-value" type="text" id="date_watch_start" name="date_watch_start" oninput="handleDatestart(event)"> 
            </div>
            <div class="update-info">
                <span class="update-key">结束日期</span>
                <input class="update-value" type="text" id="date_watch_end" name="date_watch_end"> 
            </div>
            <div class="update-info">
                <span class="update-key">状态</span>
                <!-- <input class="update-value" type="text" name="dim">  -->
                <input class="update-value" type="text" name="status" list="statuslist" placeholder="请选择状态" >
                <datalist id="statuslist">
                    <!-- 动画首看 -->
                    <option>追番</option>
                    <option>完结补番</option>
                    <option>老番入坑</option>
                    <!-- 电影首看 -->
                    <option>影院</option>
                    <option>网络首发</option>
                    <option>院线下映</option>
                    <option>老作新看</option>
                    <!-- 电视剧首看 -->
                    <option>追更</option>
                    <option>完结爽看</option>
                    <!-- 多次看 -->
                    <option>续作回顾</option>
                    <option>系列回看</option>
                    
                </datalist>
            </div>
            <input id="test" type="submit" value="提交">
        </form> 
    </div>
    <div class="notinclude row">
        <div id="h-notinclude">未收录作品</div>
        <div class="notinclude-type col-3">
            <div class="h-type" id="h-noanime">动画</div>
            <div class="notinclude-list">
                <ul class="ul-type">
                    {% for notinclude in notincludes %}
                    <li><a href="#" class="no-anime no-type">{{ notinclude.name }}</a></li>
                    {% endfor %} 
                    <br>
                </ul>
            </div>
        </div>
        <div class="notinclude-type col-3">
            <div class="h-type" id="h-nomovie">电影</div>
            <div class="notinclude-list">
                <ul class="ul-type">
                    {% for notinclude_movie in notincludes_movie %}
                    <li><a href="#" class="no-movie no-type">{{ notinclude_movie.name }}</a></li>
                    {% endfor %}
                    <br>
                </ul>
            </div>
        </div>
        <div class="notinclude-type col-3">
            <div class="h-type" id="h-noteleplay">电视剧</div>
            <div class="notinclude-list">
                <ul class="ul-type">
                    {% for notinclude_teleplay in notincludes_teleplay %}
                    <li><a href="#" class="no-teleplay no-type">{{ notinclude_teleplay.name }}</a></li>
                    {% endfor %}
                    <br>
                </ul>
            </div>
            
        </div>
        <div class="notinclude-type col-3">
            <div class="h-type" id="h-nonovel">小说</div>
            <div class="notinclude-list">
                <ul class="ul-type">
                    {% for notinclude_novel in notincludes_novel %}
                    <li><a href="#" class="no-novel no-type">{{ notinclude_novel.name }}</a></li>
                    {% endfor %}
                    <br>
                </ul>
            </div>
        </div>
    </div>
    
</div>

<script>

window.onload = function() {  
    // 点击未收录作品，自动填充作品类型及名称
    $('.notinclude-list').find('a').click(function() {
        event.preventDefault(); // 阻止默认跳转行为
        var a_type = $(this).attr('class');
        console.log(a_type);
        var a_text = $(this).text();
        if($(this).hasClass('no-anime')) {
            $('#option-anime').prop('checked', true);
        } else if($(this).hasClass('no-movie')) {
            $('#option-movie').prop('checked', true);
        } else if($(this).hasClass('no-teleplay')) {
            $('#option-teleplay').prop('checked', true);
        } else if($(this).hasClass('no-novel')) {
            $('#option-novel').prop('checked', true);
        };
        $('#name').val(a_text); 
    })
}

function handleDatestart(event) {  
    const datestartValue = event.target.value;
    if (datestartValue.length==10) {
        var types = document.getElementsByName('type');
        for(var i = 0; i < types.length; i++) {  
            if(types[i].checked) {  
                // 输出或返回已选中的单选按钮的值  
                type = types[i].value; 
                break;  
            } 
        } 
        if (type == '电影') { 
        document.getElementById('date_watch_end').value = datestartValue;
        }
    }
}

</script>

    
{% endblock %}